Docs (Guides): Mat elevation guide #3917

M-a-c · 2017-04-05T19:56:20Z

Added a basic guide on how to use Mat Elevation.
Includes Example

Link to Material designs spec for Elevation
How to use the CSS class
How to use the mixin
Deprecated naming

willshowell · 2017-04-05T20:49:20Z

guides/mat-elevation.md

+
+## Mixins
+In order to use the mixin for Elevation you must 
+`@import '~@angular/material/core/style/_elevation.scss';`


I think this should be ~@angular/material/theming now that they're using a flat release structure (#3776)

Ok yeah I'll have to fix this then

@willshowell Do you know if i will need to specify elevation.scss from that path?
@import '~@angular/material/theming/style/_elevation.scss';?

@M-a-c no that should error. Using the master builds, check out your node_modules. At /node_modules/@angular/material/_theming.scss you can see that all the mixins/functions/definitions are concatenated together, including mat-elevation().

And due to Sass importing of partials, you don't need the leading underscore or file extension in your import statement.

Sabartius · 2017-04-07T07:48:39Z

guides/mat-elevation.md

+How to use the mixin 
+```scss
+.myClass {
+  @include $mat-elevation(2);


shouldn't this be without the $? -> @include mat-elevation(2);

Sabartius · 2017-04-07T07:48:54Z

guides/mat-elevation.md

+  @include $mat-elevation(2);
+
+  &:active {
+    @include $mat-elevation(8);


Sabartius · 2017-04-07T07:50:37Z

src/examples/elevation-overview/elevation-overview-example.scss

+}
+
+.dynamimc {
+    @include $mat-elevation(2);


Also without $ ? At least in my Project it won't compile with a $

M-a-c · 2017-04-10T23:02:08Z

@Sabartius thanks for the feedback

willshowell · 2017-04-12T20:48:27Z

src/examples/elevation-overview/elevation-overview-example.scss

+.dynamimc {
+    @include mat-elevation(2);
+
+    &:active {


Shouldn't this be &:hover?

Splaktar · 2017-04-12T20:45:54Z

src/examples/elevation-overview/elevation-overview-example.html

@@ -0,0 +1,5 @@
+<div class="dynamimc">Hover over me!</div>


Did you mean dynamic?

Splaktar · 2017-04-12T20:46:24Z

src/examples/elevation-overview/elevation-overview-example.scss

+}
+
+
+.dynamimc {


Splaktar · 2017-04-12T20:49:26Z

guides/mat-elevation.md

+```
+
+## Deprecated
+The use of `mdElevation($zValue)` is deprecated.


Should we use the words attribute / directive in this text to be more clear?

Splaktar · 2017-04-12T20:51:19Z

src/examples/elevation-overview/elevation-overview-example.html

@@ -0,0 +1,5 @@
+<div class="dynamimc">Hover over me!</div>
+
+<div class"no-elevation">No Elevation</div>


Does adding the no-elevation class here create confusion?

Yeah good point, I removed it in the next commit

Splaktar

LGTM

Splaktar · 2017-04-21T06:52:42Z

@ladyleet any additional comments/suggestions for this PR?

mmalerba · 2017-05-10T17:40:22Z

src/examples/elevation-overview/elevation-overview-example.scss

+    &:hover {
+        @include mat-elevation(8);
+    }
+}


mmalerba · 2017-05-10T17:53:12Z

guides/mat-elevation.md

@@ -0,0 +1,33 @@
+# mat-elevation


how do you feel about this?

# Elevation Angular Material's elevation classes and mixins allow you to add separation between elements along the z-axis. All material design elements have resting elevations. In addition, some elements may change their elevation in response to user interaction. The [Material Design spec](https://material.io/guidelines/material-design/elevation-shadows.html) explains how best to use elevation. Angular Material provides two ways to control the elevation of elements: predefined CSS classes and mixins. ## Predefined CSS classes The easiest way to add elevation to an element is to simply add one of the predefined CSS classes `mat-elevation-z#` where `#` is the elevation number you want, 0-24. Dynamic elevation can be acheived by switching elevation classes: ```html <div [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive"></div> ```  ## Mixins Elevations can also be added in CSS via the `mat-elevation` mixin, which takes a number 0-24 indicating the elevation level of the element. In order to use the mixin you must import `~@angular/material/theming`. ```scss @import ~@angular/material/theming; .myClass { @include mat-elevation(2); &:active { @include mat-elevation(8); } } ```

mmalerba · 2017-10-27T22:03:01Z

Closing due to inactivity

angular-automatic-lock-bot · 2019-09-07T12:01:48Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

M-a-c added 6 commits March 31, 2017 14:57

added some basic information

935554e

fixed some spelling

a4a430c

added some examples there are still some problems

3de9111

added an example

2033bb4

fixed some spelling

04dff5d

added scss comment block

6160ef2

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Apr 5, 2017

fixed lint and made sure to link the style url

9b73991

willshowell reviewed Apr 5, 2017

View reviewed changes

fixed link to theming

3efe1ec

Sabartius reviewed Apr 7, 2017

View reviewed changes

guides/mat-elevation.md Outdated

@include $mat-elevation(2);

&:active {

@include $mat-elevation(8);

Copy link

Sabartius Apr 7, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

Sabartius reviewed Apr 7, 2017

View reviewed changes

docs (md elevation guide): $s removed from code.

0952077

willshowell reviewed Apr 12, 2017

View reviewed changes

Splaktar suggested changes Apr 12, 2017

View reviewed changes

M-a-c added 2 commits April 13, 2017 12:16

fixed spelling, and pr

8b54aab

removed no-elevation class

2db4d31

jelbourn assigned mmalerba Apr 13, 2017

Splaktar approved these changes Apr 21, 2017

View reviewed changes

mmalerba reviewed May 10, 2017

View reviewed changes

willshowell mentioned this pull request Aug 30, 2017

Turn md-card element to mdCard Directive to give other elements 'Card powers' #6739

Closed

mmalerba closed this Oct 27, 2017

willshowell mentioned this pull request Nov 1, 2017

docs(elevation): add guide for elevation helpers #8172

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

		@@ -0,0 +1,5 @@
		<div class="dynamimc">Hover over me!</div>

		<div class"no-elevation">No Elevation</div>

		}


		.dynamimc {

Docs (Guides): Mat elevation guide #3917

Docs (Guides): Mat elevation guide #3917

Uh oh!

Conversation

M-a-c commented Apr 5, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

M-a-c Apr 5, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

M-a-c Apr 5, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

M-a-c commented Apr 10, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Splaktar left a comment

Choose a reason for hiding this comment

Uh oh!

Splaktar commented Apr 21, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mmalerba commented Oct 27, 2017

Uh oh!

angular-automatic-lock-bot bot commented Sep 7, 2019

Uh oh!

Uh oh!

M-a-c commented Apr 5, 2017 •

edited

Loading

M-a-c Apr 5, 2017 •

edited

Loading

M-a-c Apr 5, 2017 •

edited

Loading